<!-- 我的步骤 -->

<template>
  <FormSlot label="处置步骤" bind="emergencyPlanStepDto" class="EmergencyPlan-MyStep" noMargin required>
    <div class="flexCC alignCenter">
      <div class="flex2"><b>序号</b></div>
      <div class="flex24"><b>描述</b></div>
      <div class="flex8"><b>演练时长</b></div>
      <div class="flex4"><b>评分权重</b></div>
      <div class="flex2" />
    </div>

    <draggable v-model="one.emergencyPlanStepDto" :animation="200" class="EmergencyPlan-MyStep-list">
      <div class="flexCC marginBottom" v-for="(item, i) in one.emergencyPlanStepDto" :key="item.id">
        <div class="flex2 alignCenter">{{ i + 1 }}</div>

        <FormSlot :bind="`child_${item.id}`" tip="请输入" flex24 noLabel required>
          <FormTextarea :one="item" bind="stepDesc" :max="1000" :rows="[3, 10]" resize @change="toChange(item)" />
        </FormSlot>

        <div class="flex8 flex">
          <FormSelect :one="item" v-bind="hourProps" @change="changeDuring(item)" />
          <FormSelect :one="item" v-bind="minuteProps" @change="changeDuring(item)" />
        </div>

        <FormNum :one="item" bind="scoreWeight" :min="0" :max="100" initMin rightBtn flex4 noLabel />

        <div class="flex2 alignCenter">
          <BtnText v-if="!isShow" icon="el-icon-plus" class="marginRight" @click="addChild(i)" />
          <BtnText
            v-if="!isShow"
            :disabled="one.emergencyPlanStepDto.length === 1"
            icon="el-icon-minus"
            red
            @click="delChild(i)"
          />
        </div>
      </div>
    </draggable>
  </FormSlot>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyStep',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 小时属性
     */
    hourProps() {
      return {
        bind: 'hour',
        dict: this.DICT.HOUR,
        suffix: '小时',
        initFirst: true,
        noClear: true,
        noLabel: true,
        center: true,
        flex: 1,
      }
    },

    /**
     * 分钟属性
     */
    minuteProps() {
      return {
        ...this.hourProps,
        bind: 'minute',
        dict: this.DICT.MINUTE,
        suffix: '分钟',
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 子项改变
     */
    toChange(item) {
      this.one[`child_${item.id}`] = item.stepDesc ? 'ready' : ''
    },

    /**
     * 改变时长
     */
    changeDuring(item) {
      item.duration = item.hour + item.minute
    },

    /**
     * 点击新增步骤
     */
    addChild(i) {
      const { INIT_ONE, one, $set } = this
      const child = CORE.clone(INIT_ONE.emergencyPlanStepDto[0])
      const id = `${Date.now()}`
      $set(one, `child_${id}`, '')
      one.emergencyPlanStepDto.splice(i + 1, 0, { ...child, id })
    },

    /**
     * 点击删除步骤
     */
    delChild(i) {
      const { one } = this
      one.emergencyPlanStepDto.splice(i, 1)
    },
  },
}
</script>

<style lang="scss">
@import 'index.scss';
</style>
